<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI小智 - 智能助手系统</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="app-container">
        <!-- AI界面主体 -->
        <div class="ai-interface">
            <!-- 左侧控制面板 -->
            <div class="control-panel">
                <div class="logo">
                    <div class="logo-circle"></div>
                    <h1>AI<span>小智</span></h1>
                </div>
                <div class="menu">
                    <div class="menu-item active">
                        <i class="fas fa-home"></i>
                        <span>主页</span>
                    </div>
                    <div class="menu-item">
                        <i class="fas fa-sliders-h"></i>
                        <span>系统状态</span>
                    </div>
                    <div class="menu-item">
                        <i class="fas fa-microchip"></i>
                        <span>功能中心</span>
                    </div>
                    <div class="menu-item">
                        <i class="fas fa-history"></i>
                        <span>历史记录</span>
                    </div>
                    <div class="menu-item">
                        <i class="fas fa-cog"></i>
                        <span>设置</span>
                    </div>
                </div>
                <div class="system-status">
                    <div class="status-item">
                        <span>系统状态</span>
                        <span class="status-online">在线</span>
                    </div>
                    <div class="status-item">
                        <span>内存使用</span>
                        <div class="progress-bar">
                            <div class="progress" style="width: 45%"></div>
                        </div>
                    </div>
                    <div class="status-item">
                        <span>CPU负载</span>
                        <div class="progress-bar">
                            <div class="progress" style="width: 30%"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 中间主内容区 -->
            <div class="main-content">
                <div class="header">
                    <div class="date-time">
                        <div id="current-time">00:00:00</div>
                        <div id="current-date">2024年00月00日</div>
                    </div>
                    <div class="user-info">
                        <span>您好，用户</span>
                        <div class="user-avatar">
                            <i class="fas fa-user"></i>
                        </div>
                    </div>
                </div>

                <div class="ai-display">
                    <div class="ai-visualization">
                        <div class="ai-circle">
                            <div class="ai-ring ring1"></div>
                            <div class="ai-ring ring2"></div>
                            <div class="ai-ring ring3"></div>
                            <div class="ai-core"></div>
                        </div>
                        <div class="ai-waves">
                            <div class="wave"></div>
                            <div class="wave"></div>
                            <div class="wave"></div>
                        </div>
                    </div>
                    <div class="ai-status">AI小智正在聆听...</div>
                </div>

                <div class="conversation-area">
                    <div class="conversation-container" id="conversation">
                        <div class="message ai">
                            <div class="message-content">
                                <p>您好，我是AI小智。很高兴为您服务。请问有什么我可以帮助您的吗？</p>
                            </div>
                            <div class="message-time">刚刚</div>
                        </div>
                        <!-- 消息将在此动态添加 -->
                    </div>
                </div>

                <div class="input-area">
                    <button class="voice-button" id="voice-button">
                        <i class="fas fa-microphone"></i>
                    </button>
                    <input type="text" id="user-input" placeholder="输入您的指令...">
                    <button class="send-button" id="send-button">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
            </div>

            <!-- 右侧信息面板 -->
            <div class="info-panel">
                <div class="panel-section">
                    <h3>智能功能</h3>
                    <div class="function-grid">
                        <div class="function-item">
                            <i class="fas fa-calendar-alt"></i>
                            <span>日程管理</span>
                        </div>
                        <div class="function-item">
                            <i class="fas fa-music"></i>
                            <span>播放音乐</span>
                        </div>
                        <div class="function-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>位置服务</span>
                        </div>
                        <div class="function-item">
                            <i class="fas fa-lightbulb"></i>
                            <span>智能家居</span>
                        </div>
                        <div class="function-item">
                            <i class="fas fa-chart-line"></i>
                            <span>数据分析</span>
                        </div>
                        <div class="function-item">
                            <i class="fas fa-robot"></i>
                            <span>更多功能</span>
                        </div>
                    </div>
                </div>
                
                <div class="panel-section">
                    <h3>最近指令</h3>
                    <div class="recent-commands">
                        <div class="command-item">
                            <i class="fas fa-history"></i>
                            <span>播放今日新闻</span>
                        </div>
                        <div class="command-item">
                            <i class="fas fa-history"></i>
                            <span>查询天气预报</span>
                        </div>
                        <div class="command-item">
                            <i class="fas fa-history"></i>
                            <span>设置明天提醒</span>
                        </div>
                    </div>
                </div>
                
                <div class="panel-section">
                    <h3>系统信息</h3>
                    <div class="system-info">
                        <div class="info-item">
                            <span>版本</span>
                            <span>v1.0.5</span>
                        </div>
                        <div class="info-item">
                            <span>上次更新</span>
                            <span>2024-04-03</span>
                        </div>
                        <div class="info-item">
                            <span>设备状态</span>
                            <span class="status-good">良好</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 快捷命令面板 -->
    <div class="quick-commands">
        <div class="command-chip">天气怎么样？</div>
        <div class="command-chip">今日日程</div>
        <div class="command-chip">播放音乐</div>
        <div class="command-chip">智能家居控制</div>
    </div>

    <script src="script.js"></script>
</body>
</html> 